<template>
  <div class="mine app-wrapper">
    <router-view></router-view>
    <div class="mine-nav">
      <ul class="mine-nav-list">
        <li class="mine-nav-item">
          <router-link to="/index">
            <span>
              <i class="img-icon img-icon-live"></i>
              <p>直播间</p>
            </span>
          </router-link>
        </li>
        <li class="mine-nav-item">
          <router-link to="/mine/info">
            <span>
              <i class="img-icon img-icon-user"></i>
              <p>我的</p>
            </span>
          </router-link>
        </li>
      </ul>
    </div>
    <!-- /mine-nav -->
  </div>
</template>

<script>

export default {
  components: {},
  props: {},
  data() {
    return {
    };
  },
  computed: {

  },
  methods: {},
  created() {},
  mounted() {}
};
</script>
<style lang="scss" scoped>
.mine-nav {
  position: fixed;
  width: 100%;
  bottom: 0;
  height: 98px;

  &:before {
    display: block;
    content:'';
    width: 100%;
    height: 2px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 5;
    background: #f0f0f0;
  }
}

.mine-nav-list {
  display: flex;
  background: #fff;

  .mine-nav-item {
    flex: 1;
    > a {
      height: 98px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #333;
    }

    span{
      display: inline-block;
      padding-top: 4px;
      text-align: center;
      font-size: 0;
    }
    i {
      display: inline-block;
      width: 42px;
      height: 42px;
    }
    p {
      font-size: 24px;
      line-height: 2;
    }
  }


}
</style>